<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        组件的使用分为三步“
        第一步：创建组件
              Vue.extend({该配置项和new Vue配置项几乎相同，略有差别})
              区别有哪些？
                 1，创建Vue组件的时候，配置项中不能使用el配置项。（但是需要使用template配置项来配置模板语句）
                 2，配置项中的data不能使用直接对象的形式，必须使用function。
        第二步：注册组件
               局部注册：
                 在配置项当中使用components，语法格式：
                    components : {
                        组件的名字 ： 组件对象
                    }
                    全局注册：
                     Vue.component('组件名字', 组件对象)
        第三步：使用组件
        1，小细节：在Vue当中可以使用自闭合标签，但是前提是必须在脚手架环境中使用
        2，在创建组件的时候Vue.extend()可以省略，但是底层实际上还是会调用的，在注册组件时调用
        3，组件的名字
             1，全部小写
             2，首字母大写，后面全部小写
             3，kebab-case命名法（串式命名法。例如：user-login）
             4，CamelCase命名法（驼峰式命名法。例如UserLogin）但是这种方式只允许在脚手架环境中使用 
             不要使用HTML标签名作为组件的名字
             在创建足组件的时候，通过配置项配置一个name，这个name不是组件的名字，是设置Vue开发者工具中显示的组件的名字
            -->
    <div id="app">
        <h1>{{msg}}</h1>
        <userlist></userlist>
        <userlist></userlist>
        <userlist></userlist>
        <userlist></userlist>
        <userlogin></userlogin>
        <hello-world></hello-world>
    </div>
    <div id="app2">
        <userlogin></userlogin>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        // const myComponent = Vue.extend({
        //     template: `
        //     <ul>
        //     <li v-for="(user,index) of users" :key="user.id">
        //         {{index}},{{user.name}}
        //     </li>
        // </ul>
        //     `,
        //     data() {
        //         return {
        //             users: [
        //                 { id: 001, name: 'jack' },
        //                 { id: 002, name: 'lucy' },
        //                 { id: 003, name: 'james' }
        //             ]
        //         }
        //     }
        // })

        const myComponent = {
            template: `
            <ul>
            <li v-for="(user,index) of users" :key="user.id">
                {{index}},{{user.name}}
            </li>
        </ul>
            `,
            data() {
                return {
                    users: [
                        { id: 001, name: 'jack' },
                        { id: 002, name: 'lucy' },
                        { id: 003, name: 'james' }
                    ]
                }
            }
        }

        // 代码合并
        Vue.component('hello-world', {
            template: `<h1>hello!!1</h1>`
        })
        // const myLogin = Vue.extend({
        //     template: `
        //     <div>
        //      <form @submit.prevent="login">
        //     用户名：<input type="text" v-model="username">
        //     密码：<input type="password" v-model="password">
        //     <button>点我</button>
        //      </form>
        //     </div>
        //     `,
        //     data() {
        //         return {
        //             username: '',
        //             password: ''
        //         }
        //     },
        //     methods: {
        //         login() {
        //             alert(this.username + this.password)
        //         }
        //     }
        // })

        const myLogin = {
            template: `
            <div>
             <form @submit.prevent="login">
            用户名：<input type="text" v-model="username">
            密码：<input type="password" v-model="password">
            <button>点我</button>
             </form>
            </div>
            `,
            data() {
                return {
                    username: '',
                    password: ''
                }
            },
            methods: {
                login() {
                    alert(this.username + this.password)
                }
            }
        }

        // 全局注册
        Vue.component('userlogin', myLogin)

        const vm2 = new Vue({
            el: '#app2',
        })



        const vm = new Vue({
            el: '#app',
            data: {
                msg: '组件使用',
            },
            components: {
                userlist: myComponent,
                // userlogin: myLogin,
            }
        })
    </script>
</body>

</html>